<template>
    <div>
      <div style="display:flex;justify-content: center;margin-top: 10px">
        <el-input v-model="keywords" placeholder="通过用户名搜索用户。。。" prefix-icon="el-icon-search" style="width: 400px;margin-right: 10px"></el-input>
        <el-button size="small" type="primary" icon="el-icon-search" @click="doSearch">搜索</el-button>
      </div>
      <div class="admin-container">
        <el-card class="admin-card" v-for="(admin,index) in admins" :key="index">
          <div slot="header" class="clearfix">
            <span>{{admin.name}}</span>
            <el-button style="float: right; padding: 3px 0;color: red"
                       type="text"
                       icon="el-icon-delete"
                       @click="deleteAdmin(admin)"
            ></el-button>
          </div>
          <div>
            <div class="img-container">
              <img :src="`/image?id=${admin.id}`" :alt="admin.name" :title="admin.name" class="userFace-img">
            </div>
          </div>
          <div class="userinfo-container">
            <div>用户名：{{admin.name}}</div>
            <div>手机号码：{{admin.phone}}</div>
            <div>电话号码：{{admin.telephone}}</div>
            <div>地址：{{admin.address}}</div>
            <div>
              <el-switch
              style="display: block"
              v-model="admin.enabled"
              active-color="#13cee66"
              inactive-color="#ff4949"
              @change="enabledChange(admin)"
              active-text="启用"
              inactive-text="禁用">
              </el-switch>
            </div>
            <div>用户角色：
                <el-tag style="margin-right: 4px"
                        type="success" v-for="(role,indexj) in admin.roles"
                        :key="indexj"
                >{{role.nameZh}}</el-tag>

                <el-popover
                    placement="right"
                    title="角色列表"
                    @show="showPop(admin)"
                    @hide="hidePop(admin)"
                    width="200"
                    trigger="click">
                  <template>
                    <el-select v-model="selectedRoles" multiple placeholder="请选择">
                      <el-option
                          v-for="(r,index) in allRoles"
                          :key="index"
                          :label="r.nameZh"
                          :value="r.id">
                      </el-option>
                    </el-select>
                  </template>
                  <el-button slot="reference" type="text" icon="el-icon-more"></el-button>
                </el-popover>
            </div>
          </div>
          <div>备注：{{admin.remark}}</div>
        </el-card>
      </div>
    </div>
</template>

<script>
export default {
  name: "SysAdmin",
  data(){
    return {
      admins:[],
      keywords:"",
      allRoles:[],
      selectedRoles:[]
    }
  },
  mounted() {
    this.initAdmins();
  },
  methods:{
    hidePop(admin){
      let roles = [];
      let flags = false;
      Object.assign(roles,admin.roles);debugger
      if(roles.length !== admin.roles.length){
          flags = true;
      }else{
        for(let i = 0;i<roles.length;i++){
            let role = roles[i];
            for(let j = 0;j<this.selectedRoles.length;j++){
                let str = this.selectedRoles[j];
                if(role.id===str){
                  roles.splice(i,1);
                  i--;
                  break;
                }
            }
        }
        if(roles.length!==0){
          flags = true;
        }
      }
      if(flags){
        let url = "/system/admin/role?rids="+this.selectedRoles+"&adminId="+admin.id;
        this.$putRequest(url).then(resp=>{
          if(resp){
            this.initAdmins();
          }
        });
      }
    },
    //展示角色
    showPop(admin){
      this.initAllRoles();
      let roles = admin.roles;
        this.selectedRoles = [];
        roles.forEach(r=>{
          this.selectedRoles.push(r.id);
        })
    },
    //初始化所有角色
    initAllRoles(){
      this.$getRequest("/system/admin/roles").then(resp=>{
        if(resp){
          this.allRoles = resp;
        }
      })
    },
    enabledChange(admin){
      this.$putRequest("/system/admin/",admin).then(resp=>{
        if(resp){
          this.initAdmins();
        }
      })
    },
    //删除
    deleteAdmin(admin){
      this.$confirm('此操作将永久删除['+admin.name+']操作员, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$deleteRequest("/system/admin/"+admin.id).then(resp=>{
          if(resp){
            this.initAdmins();
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //搜索
    doSearch(){
      this.initAdmins(this.keywords)
    },
    //初始化操作员
    initAdmins(){
      this.$getRequest("/system/admin/?keywords="+ this.keywords ).then(resp=>{
        if(resp){
          this.admins = resp;
        }
      })

    }
  }
}
</script>

<style scoped>
.admin-container{
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin-top: 10px;
}
.admin-card{
  width: 350px;
  margin-bottom: 10px;
}
.userFace-img{
  width: 72px;
  height: 72px;
  border-radius: 72px;
}
.img-container{
  width: 100%;
  display: flex;
  justify-content: center;
}
.userinfo-container{
  font-size: 12px;
  color: #409eff;
}
</style>